<template>
  <view class="container">
    <swiper
      :autoplay="true"
      :circular="true"
      :indicator-dots="true"
      indicator-color="#ffffff"
      indicator-active-color="#22ccff"
      :interval="2000"
    >
      <swiper-item>
        <image mode="" src="../../static/images/spr1.png" />
      </swiper-item>
      <swiper-item>
        <image mode="" src="../../static/images/spr2.webp" />
      </swiper-item>
      <swiper-item>
        <image mode="" src="../../static/images/spr3.jpg" />
      </swiper-item>
    </swiper>
    <!-- <image src="../../static/images/home.png" mode="scaleToFill" /> -->
    <view class="title" @tap="toOrderPage">点击开始点餐</view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user'

const toOrderPage = () => {

  const userStore = useUserStore()
  const token = userStore.profile?.token
  if(token){
    // 如果有token 就点餐页面
    uni.navigateTo({
        url: '/orderPages/order/order',
    })
  }else{
      // 如果没token 就登录页面
      uni.navigateTo({
        // url: '/pages/order/order',
        url: '/pages/login/login',
      })
  }


 

  
}
</script>

<style lang="less" scoped>
swiper {
  width: 100%;
  height: calc(100vw * 360 / 810);
  image {
    //图片自适应屏幕大小
    width: 100%;
  }
}

.container {
  margin: 22rpx 40rpx;
  // margin-bottom: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
}

image {
  margin-top: 40rpx;
  width: 300rpx;
  height: 300rpx;
  text-align: center;
}

.title {
  width: 300rpx;
  height: 80rpx;
  background-color: #00aaff;
  border-radius: 20rpx;
  font-size: 30rpx;
  color: #fff;
  text-align: center;
  line-height: 80rpx;
  margin-top: 200rpx;
}
</style>
